<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Nine Men Morris - Supinfo Artificial Intelligence TP</title>
    
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    
    <div class="container">
      
      <div class="row">
        
          <h1>Nine Men Morris</h1>
          
          <div>
            <p>
              <strong><i>{{message}}</i></strong>
              <br/><br/>
              <strong><i>Round : {{round}}</i></strong>
              <br/><br/>
              <i style="color:red;">{{ carefullMessage }}</i>
            </p>
          </div>
          
    
      </div>
      
      <div class="row">
          
          <div id="game" class="span6 offset1">
            
            <table>
              
              <tr data-pos="1">
                <td data-square="G" data-value="0" class="playable"></td>
                <td data-row="1" data-col="b"></td>
                <td data-row="1" data-col="c"></td>
                <td data-square="G" data-value="1" class="playable"></td>
                <td data-row="1" data-col="e"></td>
                <td data-row="1" data-col="f"></td>
                <td data-square="G" data-value="2" class="playable"></td>
              </tr>
              
              <tr data-pos="2">
                <td data-row="2" data-col="a"></td>
                <td data-square="M" data-value="0" class="playable"></td>
                <td data-row="2" data-col="c"></td>
                <td data-square="M" data-value="1" class="playable"></td>
                <td data-row="2" data-col="e"></td>
                <td data-square="M" data-value="2" class="playable"></td>
                <td data-row="2" data-col="g"></td>
              </tr>
              
              <tr data-pos="3">
                <td data-row="3" data-col="a"></td>
                <td data-row="3" data-col="b"></td>
                <td data-square="S" data-value="0" class="playable"></td>
                <td data-square="S" data-value="1" class="playable"></td>
                <td data-square="S" data-value="2" class="playable"></td>
                <td data-row="3" data-col="f"></td>
                <td data-row="3" data-col="g"></td>
              </tr>
              
              <tr data-pos="4">
                <td data-square="G" data-value="7" class="playable"></td>
                <td data-square="M" data-value="7" class="playable"></td>
                <td data-square="S" data-value="7" class="playable"></td>
                <td data-row="4" data-col="d"></td>
                <td data-square="S" data-value="3" class="playable"></td>
                <td data-square="M" data-value="3" class="playable"></td>
                <td data-square="G" data-value="3" class="playable"></td>
              </tr>
              
              <tr data-pos="5">
                <td data-row="5" data-col="a"></td>
                <td data-row="5" data-col="b"></td>
                <td data-square="S" data-value="6" class="playable"></td>
                <td data-square="S" data-value="5" class="playable"></td>
                <td data-square="S" data-value="4" class="playable"></td>
                <td data-row="5" data-col="f"></td>
                <td data-row="5" data-col="g"></td>
              </tr>
              
              <tr data-pos="6">
                <td data-row="6" data-col="a"></td>
                <td data-square="M" data-value="6" class="playable"></td>
                <td data-row="6" data-col="c"></td>
                <td data-square="M" data-value="5" class="playable"></td>
                <td data-row="6" data-col="e"></td>
                <td data-square="M" data-value="4" class="playable"></td>
                <td data-row="6" data-col="g"></td>
              </tr>
              
              <tr data-pos="7">
                <td data-square="G" data-value="6" class="playable"></td>
                <td data-row="7" data-col="b"></td>
                <td data-row="7" data-col="c"></td>
                <td data-square="G" data-value="5" class="playable"></td>
                <td data-row="7" data-col="e"></td>
                <td data-row="7" data-col="f"></td>
                <td data-square="G" data-value="4" class="playable"></td>
              </tr>
              
            </table>
            
          </div>
          
        </div>
          
      </div>

    <script type="application/dart" src="main.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>
